<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>register</title>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
    <link type="text/css" href="css/register.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <SCRIPT language="JavaScript">
        

        function passCheck() { //验证密码
            var userpass = document.myform.password.value;
            if (userpass == "") {
                alert("未输入密码 \n" + "请输入密码");
                document.myform.password.focus();
                return false;
            }
            if (userpass.length < 6 || userpass.length > 12) {
                alert("密码必须在 6-12 个字符。\n");
                return false;
            }
            return true;
        }

        function passCheck2() {
            var p1 = document.myform.password.value;
            var p2 = document.myform.password2.value;
            if (p1 != p2) {
                alert("确认密码与密码输入不一致");
                return false;
            } else {
                return true;
            }
        }

        function checkEmail() {
            var Email = document.getElementById("email").value;
            var e = Email.indexOf("@" && ".");
            if (Email.length != 0) {
                if (e > 0) {
                    if (Email.charAt(0) == "@" && ".") {
                        alert("符号@和符号.不能再邮件地址第一位");
                        return false;
                    }
                    else {
                        return true;
                    }
                }
                else {
                    alert("电子邮件格式不正确\n" + "必须包含@符号和.符号！");
                    return false;
                }
            }
            else {
                alert("请输入电子邮件！")
                return false;
            }
        }


        function validateform() {
            if (passCheck() && passCheck2() && checkEmail())
                return true;
            else
                return false;
        }

        function clearText() {
            document.myform.user.value = "";
            document.myform.password.value = "";
        }
    //短信验证码倒计时
    var countdownHandler = function () {
        var $button = $("#genVerifyCode");
        var number = 60;
        var countdown = function () {
            if (number == 0) {
                $button.attr("disabled", false);
                $button.html("发送验证码");
                number = 60;
                return;
            } else {
                $button.attr("disabled", true);
                $button.html(number + "秒 重新发送");
                number--;
            }
            setTimeout(countdown, 1000);
        }
        setTimeout(countdown, 1000);
    }
        $(function () {
            $("#genVerifyCode").click(function () {
                countdownHandler();
                $.ajax({
                    url: "http://www.test.com/api/code/create/" + $("#email").val(),
                    type: "GET",
                    success: function (result, status) {
                        console.log(result);
                        alert("验证码已发送邮箱,请查收");
                    }
                })
            });
            $("#register").click(function () {
                var flag = checkCode();
                if (flag == 1) {
                    alert("验证码错误");
                    return;
                } else if (flag == 2) {
                    alert("验证码已过期");
                    return;
                }
                var hasRegistered = checkRegisterEmail();
                if (hasRegistered==='true') {
                    alert("邮箱已注册");
                    return;
                } 
                $.ajax({
                    url: "http://www.test.com/api/user/register/" + $("#email").val() + "/" + $("#code").val() + "/" + $("#password").val(),
                    type: "POST",
                    success: function (result, status) {
                        console.log(result);
                        $.cookie('token', document.cookie.split("=")[1], { expires: 7, path: '/' });
                        location.href = "http://www.test.com/static/welcome.html?email=" + $("#email").val();
                    },
                    error: function (xhr,status, error) {
                        console.log(xhr);
                        alert(xhr.responseText);
                    }
                })
            });
            function checkCode() {
                var request = new XMLHttpRequest();
                request.open('GET', "http://www.test.com/api/code/validate/" + $("#email").val() + "/" + $("#code").val(), false);
                request.send(null);
                if (request.status === 200) {
                    console.log(request.responseText);
                    return request.responseText;
                }
            }
            function checkRegisterEmail() {
                var request = new XMLHttpRequest();
                request.open('GET', "http://www.test.com/api/user/isRegistered/" + $("#email").val(), false);
                request.send(null);
                if (request.status === 200) {
                    console.log(request);
                    return request.responseText;
                }
            }
        });

            
        
        //显示隐藏对应的switchPwd()方法:
        $(function () {
            // 通过jqurey修改
            $("#passwordeye").click(function () {
                let type = $("#password").attr('type')
                if (type === "password") {
                    $("#password").attr("type", "text");
                } else {
                    $("#password").attr("type", "password");
                }
            });
            $("#passwordeye2").click(function () {
                let type = $("#password2").attr('type')
                if (type === "password") {
                    $("#password2").attr("type", "text");
                } else {
                    $("#password2").attr("type", "password");
                }
            });
        });

    </SCRIPT>
</head>

<body>
    <img src="img/login_bg.jpg" class="bg">
    <div id="head">
        <img src="img/register_head.png" width=100% height=auto />
    </div>
    <div id="center">
        <form name="myform" onSubmit="return validateform()" enctype="multipart/form-data" action="" method="post">
            <div class="input-group">
                <h3>邮箱：</h3><input class="form-control" id="email" name="email" type="text" style="height:40px"
                    value="" />
            </div>
            <div class="input-group">
                <h3>密码：</h3><input class="form-control" id="password" name="password" type="password"
                    style="height:40px" value="" placeholder="密码长度6-12位" />
            </div>
            <div class="input-group">
                <h3>确认密码：</h3><input class="form-control" id="password2" name="password2" type="password"
                    style="height:40px" value="" />
            </div>
            <div class="input-group">
                <h3>验证码：</h3><input class="form-control" id="code" name="code" type="text" style="height:40px"
                    value="" />
                <span class="input-group-btn">
                    <button class="btn btn-default" id="genVerifyCode" type="button" value="获取验证码">获取验证码</button>
                </span>
            </div>
            <div id="btn">
                <INPUT name="registerButton" class="btn btn-primary" type="button" id="register" value="注册">
            </div>
        </form>
    </div>
    <div id="bottom">
        <div class="footer" style="color:white;">
            Copyright &copy; 2013-2019 All Rights Reserved. 备案号：
        </div>
    </div>
</body>

</html>